<template>
    <div class="container mt-3">
        <div class="row">
            <div class="offset-3 col-6">
                <label for="">账号:</label>
                <input type="text" class="form-control" v-model="person.account">
                <span class="span1"></span>
            </div>
        </div>
        <div class="row">
            <div class="offset-3 col-6">
                <label for="">密码:</label>
                <input type="text" class="form-control" v-model="person.password">
                <span class="span"></span>
            </div>
        </div>
        <div class="row mt-5">
            <div class="offset-3 col-6">
                <table class="table border table-striped">
                    <thead>
                        <tr class="text-center">
                            <th></th>
                            <th>商品名称</th>
                            <th>商品单价(元/台)</th>
                            <th>数量(台)</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in data" :key="item.pid" class="text-center">
                            <td>{{ index+1 }}</td>
                            <td>{{ item.pname }}</td>
                            <td>{{ item.price }}</td>
                            <td>
                                <button @click="handler(item.pid, -1)">-</button>
                                {{ item.count }}
                                <button @click="handler(item.pid, 1)">+</button>
                            </td>
                            <td>
                                <button class="btn btn-outline-danger" @click="rmTask(item.pid)">移除</button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="5">
                                <h1 class="h4">总价:{{ total }}</h1>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { nanoid } from 'nanoid';

const person = ref({
    account: '',
    password: ''
})
const testAccount = str => {
    const rule = /^[0-9]*$/
    for (let v of str) {
        if (rule.test(v) && v !== '') {
            const span = document.querySelector('.span1')
            span.innerHTML = `<span class="text-danger">*你输入的信息有误<span>`
        } else {
            const span = document.querySelector('.span1')
            span.innerHTML = `<span><span>`
        }
    }
}
const testPassword = str => {
    const rule = /^[A-Za-z0-9]{6,10}$/
    if (!rule.test(str)) {
        const span = document.querySelector('.span')
        console.log(span);
        span.innerHTML = `<span class="text-danger">*你输入的信息有误<span>`
    } else {
        const span = document.querySelector('.span')
        span.innerHTML = `<span><span>`
    }
}

watch(person, (newValue, oldValue) => {
    console.log(newValue.account);
    console.log(newValue.password);
    testAccount(newValue.account)
    testPassword(newValue.password)
}, {
    deep: true,
    flush: 'pre'
})
const data = ref([
    {
        pid: nanoid(6),
        pname: 'IPhoneX',
        price: 7999,
        count: 1
    },
    {
        pid: nanoid(6),
        pname: '荣耀16',
        price: 2399,
        count: 1
    },
    {
        pid: nanoid(6),
        pname: '华为P22',
        price: 3399,
        count: 1
    },
    {
        pid: nanoid(6),
        pname: '小米9',
        price: 3999,
        count: 1
    }
])

const handler = (id,num)=>{
    data.value.forEach(item=>{
        if(item.pid == id){
            if(item.count>0&&num<0){
                item.count--
            }
            if(num>0){
                item.count++
            }
        }
    })
}
const rmTask = id =>{
    data.value = data.value.filter(item=> item.pid!==id)
}

const total = computed(()=>{
    return data.value.reduce((acc,item)=>acc+item.count*item.price,0)
})

</script>

<style lang="scss" scoped></style>